<template>
  <div class="main-menu h-full">
    <div style="height:calc(100% - 40px)">
      <el-scrollbar>
        <el-menu :default-active="defaultActiveMenu" :router="true" :collapse="isCollapse"
          :style="{ width: isCollapse ? 'auto' : leftMenuWidth }">
          <inner-menu v-for="(item) in menus" :key="item.name" :data="item"></inner-menu>
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="collapse-container">
      <el-button @click="isCollapse = !isCollapse" :icon="isCollapse ? DArrowRight : DArrowLeft">
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-menu {
  // display: grid;
  // grid-template-rows: 1fr 40px;

  .ep-menu {
    border-right: none;
  }

  .collapse-container {
    height: 40px;

    button {
      border: 0;
      width: 44px;
      background-color: transparent;
    }
  }
}
</style>

<script lang="ts" setup>
import { ref } from 'vue'
import { MenuItem } from '~/types/ui/MenuItem'
import router from '~/router'
import { userStore } from '~/store'
import { DArrowRight, DArrowLeft } from '@element-plus/icons-vue'
import config from '~/config'
import InnerMenu from './InnerMenu.vue'

const currentRoute = router.currentRoute
const defaultActiveMenu = currentRoute.value.path

var leftMenuWidth = config.leftMenuWidth + 'px';

const isCollapse = ref(false)

const menus = ref<MenuItem[]>([])
userStore().getMenu().then((data) => {
  menus.value = data
})
</script>
